<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="信息列表" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<navigator  v-for="(item, index) in conversations" :key="index" :url="'../chat/chat?groupId=' + item.groupId + '&userName=' + item.toUserName + '&userId=' + item.toUser">
			<view class="conversation-item">
				<image class="grace-list-image" style="width: 100rpx;" :src="item.uface" mode="widthFix"></image>
				<view class="grace-list-body" style="border-bottom: 4rpx solid #f8f9f9;">
					<view class="grace-list-title">
						<text class="grace-h4 grace-bold">{{item.uname}}</text>
						<text class="grace-list-title-desc" style="padding-right: 60rpx;">{{item.createTime}}</text>
					</view>
					<view v-if="item.type == 'txt'" class="grace-list-body-desc grace-ellipsis" style="margin-top: 15rpx;">
						{{item.content}}
					</view>
					<view v-if="item.type == 'img'" class="grace-list-body-desc grace-ellipsis" style="margin-top: 15rpx;">
						图片
					</view>
				</view>
<!-- 				<view class="grace-fun-btn" :style="{width:funBtnsWidthShow+'px'}" v-if="moveindex == index">
					<text class="grace-fun-btns" @tap.stop="removemsg" :data-remindex="index">删除</text>
				</view> -->
			</view>
		</navigator>
	</view>
</template>
<script>
	var randStr = '';
	// 挂载 vuex
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import messageApi from "@/api/message.js"
	export default {
		data() {
			return {
				//功能按钮总宽度
				funBtnsWidth: 100,
				funBtnsWidthShow: 0,
				moveStart: 0,
				moveindex: null,
				conversations: [],
				userId: getApp().globalData.userInfo.userId,
			}
		},
		computed: {

		},
		onLoad: function() {
/* 			messageApi.getConversations().then(res => {
				this.conversations = res
				console.log(this.conversations)
			}) */
		},
		onShow: function() {
			var that = this
			let iMMsgs = uni.getStorageSync('IMMsgs');
			console.log(iMMsgs)			
			console.log(iMMsgs.length)
			let conversations = [];
			const groupIds = new Set();
			for (let i = iMMsgs.length - 1; i >= 0; i--) {
				let message = iMMsgs[i];
				if (!groupIds.has(message.groupId)) {
					if (that.userId == message.fromUser) {
						message.uface = message.toUserAvatarUrl;
						message.uname = message.toUserName;
					} else {
						message.uface = message.fromUserAvatarUrl;
						message.uname = message.fromUserName;
					}
					conversations.push(message);
					groupIds.add(message.groupId)
				}
			}
			that.conversations = conversations
			console.log(conversations)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			msgtouchstart: function(e) {
				this.moveindex = e.currentTarget.dataset.msgindex;
				this.moveStart = e.changedTouches[0].pageX;
			},
			msgtouchend: function(e) {
				if (this.funBtnsWidthShow > 0) {
					this.funBtnsWidthShow = this.funBtnsWidth;
				} else {
					this.moveindex = '-';
				}
			},
			msgtouchmove: function(e) {
				var moveX = e.changedTouches[0].pageX - this.moveStart;
				if (moveX < 0) {
					moveX = moveX * -1;
					if (moveX > this.funBtnsWidth) {
						moveX = this.funBtnsWidth;
					}
					this.funBtnsWidthShow = moveX;
				} else {
					this.funBtnsWidthShow = 0;
				}
			},
			removemsg: function(e) {
				var removeindex = e.currentTarget.dataset.remindex;
				uni.showModal({
					title: '提示',
					content: '确定删除消息吗?',
					success: (res) => {
						if (res.confirm) {
							this.graceIMFriends.splice(removeindex, 1);
							this.moveindex = '-';
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		padding-inline: 20rpx;
		background-color: white;
	}
	
	.conversation-item {
		width: calc(100vw - 40rpx);
		display: flex;
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;		
	}

	.grace-list-body-desc {
		line-height: 40rpx;
		height: 40rpx;
	}

	.grace-fun-btn {
		width: 100rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-left: 20rpx;
	}

	.grace-fun-btns {
		display: block;
		width: 150px;
		text-align: center;
		line-height: 110rpx;
		background-color: #FF0036;
		color: #FFFFFF;
		font-size: 28rpx;
		height: 110rpx;
		overflow: hidden;
	}
</style>